<template>
  <div class="folder">
    <el-dialog :title="type?'新增提醒':'编辑提醒'" :visible.sync="visible" width="450px" center
               :before-close="close"
               :close-on-click-modal="false" :close-on-press-escape='false'>
      <el-form ref="form" label-width="84px" :model="form" :rules="rules">
        <el-form-item label="分组名称:" prop="typeName">
          <el-input v-model="form.typeName" size="small" placeholder="输入分组名称" maxlength="10" :show-word-limit="true"
                    style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <!--      <p v-show="errorInfo" class="error" v-html="errorInfo"></p>-->
      <!-- 导入结果显示-->
      <div slot="footer" class="dialog-footer" align="center">
        <el-button size="mini" @click="close">取 消</el-button>
        <el-button size="mini" type="primary" @click="submit" :disabled="loading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {updateNode, addGroupNode} from '@/api/product'

    export default {
        name: "DialogFolder",
        data() {
            return {
                form: {
                    id: '',
                    pid: '',
                    typeName: ''
                },
                rules: {
                    typeName: [
                        {required: true, message: '请输入分组名称', trigger: 'blur'},
                    ],
                },
                type: '',
                visible: false,
                loading: false
            }
        },
        methods: {
            init(row, type) {
                this.type = type;
                if (this.type == 0) {//编辑
                    this.form.id = row.id;
                    this.form.typeName = row.text;
                } else {
                    this.form.id = row.pid;
                    this.form.pid = row.id;
                }
                this.visible = true
            },
            submit() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        if (this.type) {//新增
                            addGroupNode(this.form).then((res) => {
                                if (res.data.success) {
                                    this.dealResult(res)
                                }
                            }).catch(() => this.loading = false)
                        } else {//编辑
                            delete this.form.pid
                            updateNode(this.form).then((res) => {
                                if (res.data.success) {
                                    this.dealResult(res);
                                }
                            }).catch(() => this.loading = false)
                        }
                    } else {
                        return false;
                    }
                });
            },
            dealResult(res) {
                this.loading = false;
                this.$message({
                    "message": res.data.msg,
                    "type": 'success'
                })
                this.$emit('getData');
                this.close();
            },
            close() {
                this.$refs['form'].resetFields();
                this.visible = false;
            },
        }
    }
</script>

<style scoped lang="scss">
  $activeColor: #2A97F9;
  .folder {
    .el-form {
      margin: 20px;
    }

    p.error {
      color: red;
      margin-top: 15px;
      line-height: 25px;
    }
  }
</style>
